<template>
  <div class="comprehensive-result">
    <div class="topline">
      <div class="expand-arrow" @click="expand = !expand">
        <img src="@/assets/dashboard/down-arrow.png" alt="" v-if="expand" >
        <img src="@/assets/dashboard/right-arrow.png" alt="" v-else >
      </div>
      <img :src="typeImg[typeName]||''" alt="" class="type-image">
      <span class="type-name">{{ typeName }}</span>
      <div class="type-line"></div>
    </div>
    <template v-if="expand">
      <div class="result-box">
        <template v-if="typeName==='审核申请'">
          <div
            class="result-item-shenheshenqing"
            v-for="(item,index) in dataList.slice(0,5)"
          >
            <div class="left">
              <img :src="getAppImg(item.appType)" alt="">
            </div>
            <div class="right">
              <div class="title_row">
                <span class="title">{{ item.title }}</span>
                <div class="status" :class="'status_'+item.status">{{ getStatus(item.status) }}</div>
              </div>
              <div class="middle_row">
                申请人：{{ item.createUserName || '-' }}
              </div>
              <div class="footer_row">
                <span class="time">时间：{{ item.createTime || '-' }}</span>
                <span class="app_type">来源：{{ item.appType }}</span>
              </div>
            </div>
          </div>
        </template>
        <template v-if="typeName==='公文通知'">
          <div
            class="result-item-gongwentongzhi"
            v-for="(item,index) in dataList.slice(0,5)"
          >
            <div class="left">
              <img :src="getAppImg(item.appType)" alt="">
            </div>
            <div class="right">
              <div class="title_row">
                <span class="title">{{ item.title }}</span>
              </div>
              <div class="middle_row">
                {{ item.content || '-' }}
              </div>
              <div class="footer_row">
                <span class="time">时间：{{ item.createTime || '-' }}</span>
                <span class="app_type">来源：{{ item.appType }}</span>
              </div>
            </div>
          </div>
        </template>
        <template v-if="typeName==='联系人'">
          <div
            class="result-item-lianxiren"
            v-for="(item,index) in dataList.slice(0,5)"
          >
            <div class="left">
              <img src="@/assets/dashboard/searchResult/head_3.png" alt="" v-if="item.isGroup" >
              <img src="@/assets/dashboard/searchResult/head_1.png" alt="" v-else-if="item.gender==='1'" >
              <img src="@/assets/dashboard/searchResult/head_2.png" alt="" v-else-if="item.gender==='2'" >
            </div>
            <div class="right">
              <div class="title_row">
                <span class="title">{{ item.title }}</span>
              </div>
              <div class="middle_row">
                {{ item.isGroup ? item.member+'人' : item.departmentName }}
              </div>
            </div>
            <div class="rright">
              <div class="msg_btn">发送消息</div>
            </div>
          </div>
        </template>
        <template v-if="typeName==='会话'">
          <div
            class="result-item-huihua"
            v-for="(item,index) in dataList.slice(0,5)"
          >
            <div class="left">
              <img src="@/assets/dashboard/searchResult/head_3.png" alt="" v-if="item.isGroup" >
              <img src="@/assets/dashboard/searchResult/head_1.png" alt="" v-else-if="item.gender==='1'" >
              <img src="@/assets/dashboard/searchResult/head_2.png" alt="" v-else-if="item.gender==='2'" >
            </div>
            <div class="right">
              <div class="title_row">
                <span class="title">{{ item.title }}</span>
              </div>
              <div class="middle_row">
                {{ (item.isGroup ? (item.sendUserName + '：') : '') + item.content }}
              </div>
              <div class="footer_row">
                <span class="time">时间：{{ item.createTime || '-' }}</span>
              </div>
            </div>
          </div>
        </template>
        <template v-if="typeName==='文件图片'">
          <div
            class="result-item-wenjiantupian"
            v-for="(item,index) in dataList.slice(0,5)"
          >
            <div class="left">
              <img src="@/assets/dashboard/searchResult/fileIcon/icon_xls.png" alt="" v-if="getFileType(item.title)==='xls'||getFileType(item.title)==='xlsx'||getFileType(item.title)==='csv'">
              <img src="@/assets/dashboard/searchResult/fileIcon/icon_doc.png" alt="" v-else-if="getFileType(item.title)==='doc'||getFileType(item.title)==='docx'">
              <img src="@/assets/dashboard/searchResult/fileIcon/icon_ppt.png" alt="" v-else-if="getFileType(item.title)==='ppt'||getFileType(item.title)==='pptx'">
              <img src="@/assets/dashboard/searchResult/fileIcon/icon_pdf.png" alt="" v-else-if="getFileType(item.title)==='pdf'">
              <img src="@/assets/dashboard/searchResult/fileIcon/icon_txt.png" alt="" v-else-if="getFileType(item.title)==='txt'">
              <img src="@/assets/dashboard/searchResult/fileIcon/icon_jpg.png" alt="" v-else-if="getFileType(item.title)==='jpg'||getFileType(item.title)==='png'||getFileType(item.title)==='pdf'">
              <img src="@/assets/dashboard/searchResult/fileIcon/icon_zip.png" alt="" v-else-if="getFileType(item.title)==='zip'||getFileType(item.title)==='rar'||getFileType(item.title)==='7z'">
              <img src="@/assets/dashboard/searchResult/fileIcon/icon_other.png" alt="" v-else>
            </div>
            <div class="right">
              <div class="title_row">
                <span class="title">{{ item.title }}</span>
              </div>
              <div class="middle_row">
                {{ item.size + 'Kb' }}
              </div>
              <div class="footer_row">
                <span class="time">时间：{{ item.createTime || '-' }}</span>
                <span class="source">来源：{{ item.source }}</span>
              </div>
            </div>
            <div class="rright">
              <div class="download_btn">下载</div>
            </div>
          </div>
        </template>
        <template v-if="typeName==='功能应用'">
          <div
            class="result-item-gongnengyingyong"
            v-for="(item,index) in dataList.slice(0,5)"
          >
            <div class="left">
              <img :src="getAppImg(item.appType)" alt="">
            </div>
            <div class="right">
              <div class="title_row">
                <span class="title">{{ item.title }}</span>
              </div>
              <div class="middle_row">
                来源：{{ item.appType || '-' }}
              </div>
            </div>
            <div class="rright">
              <div class="open_btn">{{ item.appType==='NTalk' ? '打开应用' : '打开功能' }}</div>
            </div>
          </div>
        </template>
        <template v-if="typeName==='文章'">
          <div
            class="result-item-wenzhang"
            v-for="(item,index) in dataList.slice(0,5)"
          >
            <div class="left">
              <img :src="getAppImg(item.appType)" alt="">
            </div>
            <div class="right">
              <div class="title_row">
                <span class="title">{{ item.title }}</span>
              </div>
              <div class="middle_row">
                {{ item.content || '-' }}
              </div>
              <div class="footer_row">
                <span class="time">时间：{{ item.createTime || '-' }}</span>
                <span class="app_type">来源：{{ item.appType }}</span>
              </div>
            </div>
          </div>
        </template>
        <template v-if="typeName==='自助机'">
          <div
            class="result-item-zizhuji"
            v-for="(item,index) in dataList.slice(0,5)"
          >
            <div class="left">
              <img :src="getAppImg(item.appType)" alt="">
            </div>
            <div class="right">
              <div class="title_row">
                <span class="user">{{ item.sendUserName }} {{ item.sendUserPhone }}</span>
                <img class="divider" src="@/assets/dashboard/searchResult/progressRight.png" alt="">
                <span class="user">{{ item.getUserName }} {{ item.getUserPhone }}</span>
              </div>
              <div class="footer_row">
                <span class="billNo">承运单号：{{ item.billNo || '-' }}</span>
                <span class="createTime">开单时间：{{ item.createTime || '-' }}</span>
              </div>
            </div>
          </div>
        </template>
        <template v-if="typeName==='G3平台'">
          <div
            class="result-item-g3pingtai"
            v-for="(item,index) in dataList.slice(0,5)"
            :key="index"
          >
            <div class="left">
              <img :src="getAppImg(item.appType)" alt="">
            </div>
            <div class="right">
              <div class="title_row">
                <span class="title">{{ item.title }}</span>
                <div class="status" :class="'status_'+item.status">{{ item.status==='1' ? '正常' : '异常' }}</div>
              </div>
              <div class="footer_row">
                <span class="customerCode">客户编号：{{ item.customerCode || '-' }}</span>
                <span class="contact">联系人：{{ item.contact }} {{ item.phone }}</span>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div class="more-search" v-if="dataList.length>5" @click="researchType">
        <span>在“{{ typeName }}”中查看更多搜索结果</span>
        <img src="@/assets/dashboard/right-arrow.png" alt="" >
      </div>
    </template>
  </div>
</template>

<script>
import { allAppList } from "@/components/workApp/components/appList";
import g3pingtai from '@/assets/dashboard/searchResult/searchType/g3pingtai.png'
import gongnengyingyong from '@/assets/dashboard/searchResult/searchType/gongnengyingyong.png'
import gongwentongzhi from '@/assets/dashboard/searchResult/searchType/gongwentongzhi.png'
import huihua from '@/assets/dashboard/searchResult/searchType/huihua.png'
import lianxiren from '@/assets/dashboard/searchResult/searchType/lianxiren.png'
import shenheshenqing from '@/assets/dashboard/searchResult/searchType/shenheshenqing.png'
import wenjiantupian from '@/assets/dashboard/searchResult/searchType/wenjiantupian.png'
import wenzhang from '@/assets/dashboard/searchResult/searchType/wenzhang.png'
import zizhuji from '@/assets/dashboard/searchResult/searchType/zizhuji.png'
export default {
  components: {
  },
  name: "",
  props: {
    typeName: {
      type: String,
      default: '',
    },
    dataList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      typeImg: {
        'G3平台': g3pingtai,
        '功能应用': gongnengyingyong,
        '公文通知': gongwentongzhi,
        '会话': huihua,
        '联系人': lianxiren,
        '审核申请': shenheshenqing,
        '文件图片': wenjiantupian,
        '文章': wenzhang,
        '自助机': zizhuji,
      },
      expand: true, //默认展开
      statusList: [
        { label: '未处理', value: '0' },
        { label: '审核中', value: '1' },
        { label: '已处理', value: '2' },
        { label: '已同意', value: '3' },
      ],
    }
  },
  computed: {
  },
  mounted() {

  },
  methods: {
    //返回应用图片
    getAppImg(appName) {
      let res = allAppList.find(item=>{
        return item.text === appName
      })
      return res ? res.img : ''
    },
    //切换类别搜索
    researchType(){
      this.$emit('researchType',this.typeName)
    },
    //返回审核状态
    getStatus(val){
      let res = this.statusList.find(item=>{
        return item.value === val
      })
      return res ? res.label : '未知状态'
    },
    //获取文件类型
    getFileType(fileName) {
      if(!fileName || typeof(fileName) !== 'string'){
        return ''
      }
      return fileName.split('.').pop()
    },
  },
};
</script>
<style lang="less" scoped>
@textColor: #1f1e1d;
@ntalkColor: #e67529;
.comprehensive-result {
  width: 100%;
  margin-bottom: 24px;
  .topline {
    width: 100%;
    height: 22px;
    display: flex;
    align-items: center;
    overflow-x: hidden;
    .expand-arrow {
      width: 14px;
      height: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      cursor: pointer;
    }
    .type-image {
      width: 20px;
      height: 20px;
      margin-left: 8px;
      flex-shrink: 0;
    }
    .type-name {
      font-size: 14px;
      color: @textColor;
      margin: 0 8px;
      flex-shrink: 0;
    }
    .type-line {
      width: 100%;
      height: 1px;
      background-color: rgba(0,0,0,0.06);
      flex-shrink: 1;
    }
  }
  .more-search {
    box-sizing: border-box;
    margin-left: 56px;
    margin-top: 12px;
    height: 22px;
    display: flex;
    align-items: center;
    cursor: pointer;
    span {
      font-size: 14px;
      color: rgba(0,0,0,0.44);
      padding-right: 11px;
    }
    img {
      width: 7px;
      height: 11px;
    }
  }
  .result-box {
    width: calc(100% - 22px);
    margin: 12px 0 0 22px;
    .result-item-shenheshenqing {
      width: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 8px 12px;
      display: flex;
      &:last-child {
        margin-bottom: 0;
      }
      &:nth-child(2n+1) {
        background-color: #fff9f5;
      }
      .left {
        width: 32px;
        margin-right: 12px;
        img {
          width: 32px;
          height: 32px;
          margin-top: 5px;
          border-radius: 6px;
        }
      }
      .right {
        width: calc(100% - 44px);
        .title_row {
          width: 100%;
          height: 22px;
          display: flex;
          align-items: center;
          .title {
            font-size: 14px;
            color: @textColor;
          }
          .status {
            box-sizing: border-box;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            border: 1px solid;
            margin-left: 8px;
            padding: 0 8px;
            &.status_0 {
              border-color: #ffd591;
              background-color: #fff7e6;
              color: #fa8c16;
            }
            &.status_1 {
              border-color: #91caff;
              background-color: #e6f4ff;
              color: #1677ff;
            }
            &.status_2 {
              border-color: #b7eb8f;
              background-color: #f6ffed;
              color: #52c41a;
            }
            &.status_3 {
              border-color: #b7eb8f;
              background-color: #f6ffed;
              color: #52c41a;
            }
          }
        }
        .middle_row {
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: rgba(0,0,0,0.66);
        }
        .footer_row {
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
          margin-top: 4px;
          .time {
            width: 180px;
          }
        }
      }
    }
    .result-item-gongwentongzhi {
      width: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 8px 12px;
      display: flex;
      &:last-child {
        margin-bottom: 0;
      }
      &:nth-child(2n+1) {
        background-color: #fff7f7;
      }
      .left {
        width: 32px;
        margin-right: 12px;
        img {
          width: 32px;
          height: 32px;
          margin-top: 5px;
          border-radius: 6px;
        }
      }
      .right {
        width: calc(100% - 44px);
        .title_row {
          width: 100%;
          height: 22px;
          display: flex;
          align-items: center;
          .title {
            font-size: 14px;
            color: @textColor;
          }
        }
        .middle_row {
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: rgba(0,0,0,0.66);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .footer_row {
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
          margin-top: 4px;
          .time {
            width: 180px;
          }
        }
      }
    }
    .result-item-lianxiren {
      width: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 8px 12px;
      display: flex;
      &:last-child {
        margin-bottom: 0;
      }
      &:nth-child(2n+1) {
        background-color: #f5f5ff;
      }
      .left {
        width: 32px;
        margin-right: 12px;
        img {
          width: 32px;
          height: 32px;
          margin-top: 5px;
          border-radius: 6px;
        }
      }
      .right {
        width: calc(100% - 116px);
        .title_row {
          width: 100%;
          height: 22px;
          display: flex;
          align-items: center;
          .title {
            font-size: 14px;
            color: @textColor;
          }
        }
        .middle_row {
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: rgba(0,0,0,0.66);
        }
      }
      .rright {
        display: flex;
        .msg_btn {
          margin-top: 9px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #fff;
          border-radius: 4px;
          font-size: 14px;
          border: 1px solid #f2f3f6;
          box-sizing: border-box;
          cursor: pointer;
          height: 24px;
          width: 72px;
        }
      }
    }
    .result-item-huihua {
      width: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 8px 12px;
      display: flex;
      &:last-child {
        margin-bottom: 0;
      }
      &:nth-child(2n+1) {
        background-color: #f5fbff;
      }
      .left {
        width: 32px;
        margin-right: 12px;
        img {
          width: 32px;
          height: 32px;
          margin-top: 5px;
          border-radius: 6px;
        }
      }
      .right {
        width: calc(100% - 44px);
        .title_row {
          width: 100%;
          height: 22px;
          display: flex;
          align-items: center;
          .title {
            font-size: 14px;
            color: @textColor;
          }
        }
        .middle_row {
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: rgba(0,0,0,0.66);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .footer_row {
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
          margin-top: 4px;
          .time {
            width: 180px;
          }
        }
      }
    }
    .result-item-wenjiantupian {
      width: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 8px 12px;
      display: flex;
      &:last-child {
        margin-bottom: 0;
      }
      &:nth-child(2n+1) {
        background-color: #f2fcf9;
      }
      .left {
        width: 32px;
        margin-right: 12px;
        img {
          width: 32px;
          height: 32px;
          margin-top: 5px;
          border-radius: 6px;
        }
      }
      .right {
        width: calc(100% - 88px);
        .title_row {
          width: 100%;
          height: 22px;
          display: flex;
          align-items: center;
          .title {
            font-size: 14px;
            color: @textColor;
          }
        }
        .middle_row {
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: rgba(0,0,0,0.66);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .footer_row {
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
          margin-top: 4px;
          .time {
            width: 180px;
          }
          .source {
            white-space: nowrap;
          }
        }
      }
      .rright {
        display: flex;
        .download_btn {
          margin-top: 9px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #fff;
          border-radius: 4px;
          font-size: 14px;
          border: 1px solid #f2f3f6;
          box-sizing: border-box;
          cursor: pointer;
          height: 24px;
          width: 44px;
        }
      }
    }
    .result-item-gongnengyingyong {
      width: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 8px 12px;
      display: flex;
      &:last-child {
        margin-bottom: 0;
      }
      &:nth-child(2n+1) {
        background-color: #fcfbf0;
      }
      .left {
        width: 32px;
        margin-right: 12px;
        img {
          width: 32px;
          height: 32px;
          margin-top: 5px;
          border-radius: 6px;
        }
      }
      .right {
        width: calc(100% - 116px);
        .title_row {
          width: 100%;
          height: 22px;
          display: flex;
          align-items: center;
          .title {
            font-size: 14px;
            color: @textColor;
          }
        }
        .middle_row {
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: rgba(0,0,0,0.66);
        }
      }
      .rright {
        display: flex;
        .open_btn {
          margin-top: 9px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #fff;
          border-radius: 4px;
          font-size: 14px;
          border: 1px solid #f2f3f6;
          box-sizing: border-box;
          cursor: pointer;
          height: 24px;
          width: 72px;
        }
      }
    }
    .result-item-wenzhang {
      width: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 8px 12px;
      display: flex;
      &:last-child {
        margin-bottom: 0;
      }
      &:nth-child(2n+1) {
        background-color: #fff9f5;
      }
      .left {
        width: 32px;
        margin-right: 12px;
        img {
          width: 32px;
          height: 32px;
          margin-top: 5px;
          border-radius: 6px;
        }
      }
      .right {
        width: calc(100% - 44px);
        .title_row {
          width: 100%;
          height: 22px;
          display: flex;
          align-items: center;
          .title {
            width: 100%;
            font-size: 14px;
            color: @textColor;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .middle_row {
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: rgba(0,0,0,0.66);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .footer_row {
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
          margin-top: 4px;
          .time {
            width: 180px;
          }
        }
      }
    }
    .result-item-zizhuji {
      width: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 8px 12px;
      display: flex;
      &:last-child {
        margin-bottom: 0;
      }
      &:nth-child(2n+1) {
        background-color: #fff7f7;
      }
      .left {
        width: 32px;
        margin-right: 12px;
        img {
          width: 32px;
          height: 32px;
          margin-top: 5px;
          border-radius: 6px;
        }
      }
      .right {
        width: calc(100% - 44px);
        .title_row {
          width: 100%;
          height: 22px;
          display: flex;
          align-items: center;
          .user {
            font-size: 14px;
            color: @textColor;
          }
          .divider {
            width: 16px;
            height: 16px;
            margin: 0 8px;
          }
        }
        .footer_row {
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
          margin-top: 4px;
          .billNo {
            width: 180px;
          }
          .createTime {
            white-space: nowrap;
          }
        }
      }
    }
    .result-item-g3pingtai {
      width: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 8px 12px;
      display: flex;
      &:last-child {
        margin-bottom: 0;
      }
      &:nth-child(2n+1) {
        background-color: #f5f5ff;
      }
      .left {
        width: 32px;
        margin-right: 12px;
        img {
          width: 32px;
          height: 32px;
          margin-top: 5px;
          border-radius: 6px;
        }
      }
      .right {
        width: calc(100% - 44px);
        .title_row {
          width: 100%;
          height: 22px;
          display: flex;
          align-items: center;
          .title {
            font-size: 14px;
            color: @textColor;
          }
          .status {
            box-sizing: border-box;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            border: 1px solid;
            margin-left: 8px;
            padding: 0 8px;
            &.status_0 {
              border-color: #ffd591;
              background-color: #fff7e6;
              color: #fa8c16;
            }
            &.status_1 {
              border-color: #b7eb8f;
              background-color: #f6ffed;
              color: #52c41a;
            }
          }
        }
        .footer_row {
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
          margin-top: 4px;
          .customerCode {
            width: 180px;
          }
          .contact {
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
